<template>
	<div v-if="pageInformation" class="customization" page="customization">
		<nav-header>
			<div class="" slot="left"></div>
		</nav-header>
		<div class="customization-header">
			<div class="customization-header-explain">
				<div class="customization-header-title">
					宴会定制
				</div>
				<div class="customization-header-subtitle">
					联系我定制一场宴会吧！
				</div>
			</div>
			<img class="customization-header-img" :src="pageInformation.ser_info.service_img" />
		</div>
		<div class="customization-body">
			<div class="customization-scroll">
				<img @click="isShowCustomExplain" v-for="(item,index) in pageInformation.imgs" class="customization-scroll-img" v-lazy="item" />
			</div>
		</div>
		<go-make @hideImmediatelyCustomization="hideImmediatelyCustomization"></go-make>
		<hidden-custom-explain v-if="showCustomExplain" @hideCustomExplain="hideCustomExplain"></hidden-custom-explain>
		<immediately-customization v-if="showImmediatelyCustomization" @hideImmediatelyCustomization="hideImmediatelyCustomization"></immediately-customization>
		<tabBar-footer></tabBar-footer>
	</div>
</template>

<script>
	import header from "@/components/header/header"
	import server from "@/server/api"
	import footer from "@/components/footer/footer"
	import goMake from "@/pages/customization/components/go-make"
	import hiddenCustomExplain from "@/pages/customization/components/hidden-custom-explain"
	import immediatelyCustomization from "@/pages/customization/components/immediately-customization"

	export default {
		data() {
			return {
				showCustomExplain: false,
				showImmediatelyCustomization: false,
				pageInformation: null
			}
		},
		mounted() {},
		created() {
			this.loadPage()
		},
		methods: {
			isShowCustomExplain() {
				this.showCustomExplain = !this.showCustomExplain
			},
			hideCustomExplain(val) {
				this.showCustomExplain = val;
			},
			hideImmediatelyCustomization(val) {
				this.showImmediatelyCustomization = val;
			},
			loadPage() {
				let _this = this;
				server.post("/index/goods/customized_info", function(res) {
					_this.pageInformation = res.data;
				})
			}
		},
		components: {
			"nav-header": header,
			"tabBar-footer": footer,
			"go-make": goMake,
			"hidden-custom-explain": hiddenCustomExplain,
			"immediately-customization": immediatelyCustomization
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	img[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
		background-image: url(http://47.98.119.130/test/img/loding.gif);
		background-repeat: no-repeat;
		background-position: 50% 50%;
	}
	
	.customization {
		width: 100%;
		overflow: hidden;
		margin: 90px 0 0;
		.customization-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10px;
			margin: 0 40px;
			border-bottom: 2px solid #DCDCDC;
			.customization-header-explain {
				width: 100%;
				padding-right: 20px;
				.customization-header-title {
					font-size: 60px;
					color: #4A4A4A;
					line-height: 84px;
				}
				.customization-header-subtitle {
					font-size: 30px;
					color: #9B9B9B;
				}
			}
			.customization-header-img {
				width: 88px;
				height: 88px;
				border-radius: 50%;
				flex-shrink: 0;
			}
		}
		.customization-body {
			width: 100%;
			box-sizing: border-box;
			padding: 95px 0 64px 50px;
			.customization-scroll {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				overflow-x: scroll;
				.customization-scroll-img {
					display: inline-block;
					height: 656px;
					width: 534px;
					margin-right: 38px;
					border-radius: 8px;
					box-shadow: 0 40px 100px 0 rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
	
	@media (min-height:750px) {
		.customization-scroll-img {
			width: 630px !important;
			height: 794px !important;
		}
	}
</style>